<template>
    <div class="rightThree">
        <ThemeTitlenew :title="title" />
        <div class="transState">
            <div class="twoMsg">
                <div class="road" >
                    <span @click="gonglu" id="gonglu">高速公路:</span>
                    <span id="gonglutext">{{Number(trafficArr.gllc).toFixed(2)}}千公里</span>
                    <!-- <span>1160公里</span> -->
                </div>
                <div class="railway">
                    <span @click="tielu" id="tielu">高速铁路:</span
                    >
                    <span id="tielutext">{{Number(trafficArr.tllc).toFixed(2)}}千公里</span>
                    <!-- <span>653公里</span> -->
                </div>
            </div>
            <div class="threeMsg">
                <div
                    v-for="(item, index) in threeMsg"
                    @click="threeArea(index)"
                    style="cursor: pointer"
                    :key="index"
                   
                >
                    <div :id="'threeMsg'+index">{{ item.name }}</div>
                    <div>{{ item.val }}</div>
                </div>
            </div>
        </div>
        <!-- 海运港口弹框 -->
        <div class="maritimePort" id="maritimePort">
            <div class="maritimePort-close" @click="closeInfo()">
                <i class="el-icon-close"></i>
            </div>
            <div class="maritimePort-title">
                <span class="leftname">省份：</span><span class="rightname">{{maritimePortInfo.shengMc}}</span>
            </div>
             <div class="maritimePort-title">
                <span class="leftname">市名称：</span><span class="rightname">{{maritimePortInfo.shiMc}}</span>
            </div>
             <div class="maritimePort-title">
                <span class="leftname">城镇：</span><span class="rightname">{{maritimePortInfo.zhenMc}}</span>
            </div>
             <div class="maritimePort-title">
                <span class="leftname">港口名：</span><span class="rightname">{{maritimePortInfo.mc}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitlenew from "../../common/ThemeTitlenew";
import { addLayerImage,removeLayerByName} from '@/cesiumPlugin/layer'
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    provide,
    watch,
    reactive
} from "vue";
import axios from "axios";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import onedata from './a.json'
export default {
    components: {
        ThemeTitlenew,
    },
    setup() {
        let status1 = ref(0)
        let status2 = ref(0)
        let status3 = ref(0)
        let status4 = ref(0)
        const oldmodel = reactive({})
        const maritimePortInfo = reactive({
            mc:"0",
            shengMc:"",
            shiMc:"",
            xianMc:"",
            zhenMc:""
        })
        const title = provide("title", "交通情况");
        const store = useStore();
        const threeMsg =reactive([
            { name: "海运港口", val: "30个" },
            // { name: "飞机航线", val: "105条" },
            {name: "民航机场", val: "8个"}
        ]);
        // const airport = [
        //     { name: "海口美兰国际机场", point: [110.467385, 19.942495] },
        //     { name: "三亚凤凰国际机场", point: [109.414693, 18.303395] },
        //     { name: "琼海博鳌国际机场", point: [110.458806, 19.139802] },
        //     { name: "三沙永兴机场", point: [112.34218, 16.834181] },
        // ];
        const trafficArr =reactive({
            gllc:"0", //高速公路
            tllc:"0", //高速铁路
            mhjc:[], //民航机场
            hygk:[] //海运港口
        })
        function tielu() {
            if(status2._value== 0){
            store.commit("changeDescShow", false);
            layerManager.removeAll();
            layerManager.fly(109.8976359396365,16.92363013852743,337051,6.215216628488726,-0.9212251504110252,0.000021543471909524214)
            // removeLayerByName("公路")  
            let config={
                  name:"铁路",
                  wmtsUrl:"http://59.212.37.22/mapserver/vmap/WMTS/1.0/RAILWAY_L/460301_1",
                  layer:"RAILWAY_L",
                  style: "default",
                  format: "image/png",
                  tileMatrixSetID: "default028mm",
              }
            addLayerImage(config)
            var a =  document.getElementById("tielu")
            var b = document.getElementById("tielutext")
            a.style.color="#00e5fd"
            b.style.color="#00e5fd"
            status2._value=1
            }else if(status2._value== 1){
            removeLayerByName("铁路")  
             var a =  document.getElementById("tielu")
            var b = document.getElementById("tielutext")
            a.style.color="#ffffff"
            b.style.color="#ffffff"
            status2._value=0
            }
          
            // axios.get("./data/geojson/hainanRailway.json").then((res) => {
            //     res.data.features.forEach((item) => {
            //         let arr = item.geometry.coordinates;
            //         let arr1 = [].concat.apply([], arr);
            //         let x = 1;
            //         let flog = true;
            //         viewer.entities.add({
            //             name: "",
            //             polyline: {
            //                 positions: Cesium.Cartesian3.fromDegreesArray(arr1),
            //                 clampToGround: false,
            //                 width: 10,
            //                 material: new Cesium.PolylineGlowMaterialProperty({
            //                     color: new Cesium.CallbackProperty(function () {
            //                         if (flog) {
            //                             x = x - 0.02;
            //                             if (x <= 0) {
            //                                 flog = false;
            //                             }
            //                         } else {
            //                             x = x + 0.02;
            //                             if (x >= 1) {
            //                                 flog = true;
            //                             }
            //                         }
            //                         return Cesium.Color.TURQUOISE.withAlpha(x);
            //                     }, false),
            //                 }),
            //             },
            //         });
            //     });
            // });
        }
        function gonglu(){
        if(status1._value== 0){
        store.commit("changeDescShow", false);
        layerManager.removeAll();
        layerManager.fly(109.8976359396365,16.92363013852743,337051,6.215216628488726,-0.9212251504110252,0.000021543471909524214)   
        let config={
                  name:"公路",
                  wmtsUrl:"http://59.212.37.22/mapserver/vmap/WMTS/1.0/ROAD_L/46030301",
                  layer:"ROAD_L",
                  style: "default",
                  format: "image/png",
                  tileMatrixSetID: "default028mm",
        }
        addLayerImage(config)
        var a =  document.getElementById("gonglu")
        var b = document.getElementById("gonglutext")
        // console.log(a)
        a.style.color="#00e5fd"
        b.style.color="#00e5fd"
        status1._value = 1
        }else if(status1._value== 1){
        removeLayerByName("公路") 
        var a =  document.getElementById("gonglu")
        var b = document.getElementById("gonglutext")
        a.style.color="#ffffff"
        b.style.color="#ffffff"
        status1._value = 0
        }
       
        }
        function threeArea(index) {
            store.commit("changeDescShow", false);
            removeLayerByName("铁路")  
            removeLayerByName("公路")  
            layerManager.removeAll();
            if (index == 0) {
                if(status3._value == 0){
                 layerManager.fly(
                    109.81718500012782,
                    19.345261718452747,
                    474882,
                    6.237318703147128,
                    -1.5704875459600833,
                    0
                );
                var a = document.getElementById("threeMsg0")
                 a.style.color="#00e5fd"
                 status3._value=1
                trafficArr.hygk.forEach((item,index)=>{
                         let arr = item.geo
                         let dataItem = item
                        if(arr.indexOf("MULTI")>-1){
                            let arr1 = arr.replace("MULTIPOLYGON(((", "[[").replace(")))","]]").replace(/\(+/g, "[").replace(/\)+/g, "]").replace(/\s+/g, ",");
                            let arr2 = eval( "(" + arr1 + ")" )
                            arr2.forEach((item,index) => {
                                layerManager.addPloygonLine("haiyungangkou"+index,item,dataItem)
                            });
                        }else{
                            //二，针对POLYGON 首位替换，去掉
                            let arr1 = arr.replace("POLYGON((", "[").replace("))","]").replace(/\s+/g, ",");
                            // console.log(arr1)
                            let arr2 = eval( "(" + arr1 + ")" )
                            // console.log(arr2)
                            layerManager.addPloygonLine("haiyungangkou"+Math.random(),arr2,dataItem)
                     }  
                })
                }else if(status3._value == 1){
                 var a = document.getElementById("threeMsg0")
                 a.style.color="#ffffff"
                 status3._value=0
                }
            } else if (index == 1) {
                if(status4._value == 0){
                layerManager.fly(
                    110.94127688859962,
                    10.90577836803801,
                    532077,
                    6.227620620768686,
                    -0.6078657289560305,
                    0.0013019097201718566
                );
                trafficArr.mhjc.forEach((item,index1)=>{
                    layerManager.addBillboard("jcWord"+index1,item.wd,item.jd,"/data/images/earth/local1.png")
                    layerManager.addOnlyLabelWithColor(
                        'jcName'+index1,
                        [item.wd,item.jd], 
                        3 , 
                        item.mc, 
                        "leftClick", lLeftClick)
                }) 
                var a = document.getElementById("threeMsg1")
                 a.style.color="#00e5fd"
                 status4._value=1
                }else if(status4._value == 1){
                 layerManager.fly(
                    109.81718500012782,
                    19.345261718452747,
                    474882,
                    6.237318703147128,
                    -1.5704875459600833,
                    0
                );
                 store.commit("changeDescShow",false)
                 layerManager.removeAll()
                  var a = document.getElementById("threeMsg1")
                 a.style.color="#ffffff"
                 status4._value=0
                }
            } else if (index == 2) {
            }
        }
        function lLeftClick() {}
        function initTraffic(){
            axios({
			     	url: `${window.loginUrl}/api/traffic/getInfo`,
			     	method: 'get',
			     }).then((res) => {
                     if(res.data.code == 200){
                        trafficArr.gllc =parseFloat(res.data.data.gllc).toFixed(8)
                        trafficArr.tllc =parseFloat(res.data.data.tllc).toFixed(8)
                        trafficArr.hygk = res.data.data.hygk
                        trafficArr.mhjc = res.data.data.mhjc
                     }
			     })
        }
        function addBoundInfoBox(positionValue, elementId){
            const oneDiv = window.document.getElementById(elementId);
            oneDiv.style.display = "block";
            let preRenderListener = viewer.scene.postRender.addEventListener(()=>{
                 let elWidth = oneDiv.offsetWidth;
                  let elHeight = oneDiv.offsetHeight;
                  const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                    let position = positionValue;
                    var cartographicPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position); //笛卡尔转84
                    var lat=Cesium.Math.toDegrees(cartographicPosition.latitude);
                    var lng=Cesium.Math.toDegrees(cartographicPosition.longitude);
                    var alt=cartographicPosition.height;
                    var positions = [
                            Cesium.Cartographic.fromDegrees(lng,lat)
                    ];
                    var carto=new Cesium.Cartographic.fromDegrees(lng,lat)　　//输入经纬度
                    var h2=viewer.scene.sampleHeight(carto);
					
                    // var promise = Cesium.sampleTerrainMostDetailed(window.dx, positions);//(地形数据，positions)
                    var position1 = Cesium.Cartesian3.fromDegrees(lng, lat,h2);//加入高度之后，不会飘，但是不能解决地球缩放问题
                    const canvasPosition =
                        viewer.scene.cartesianToCanvasCoordinates(
                            position1,
                            scratch
                        ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标

                    if (Cesium.defined(canvasPosition)) {
                        // 根据元素宽高及当前点屏幕坐标进行偏移
                        oneDiv.style.top =
                            canvasPosition.y - elHeight * 1.1 + "px";
                        oneDiv.style.left =
                            canvasPosition.x - elWidth / 2 + "px";
                    }
            })
		 }
        function initIcon(){
            var handlerVideo = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
             handlerVideo.setInputAction((movement) => {
                 if((viewer.selectedEntity._id).substr(0,13) == "haiyungangkou"){
                    //  console.log(viewer.selectedEntity._id)
                    if(oldmodel._value){
                     oldmodel._value.polygon.material = Cesium.Color.fromCssColorString("rgba(115,227,230,1)").withAlpha(.3)
                    }
                 viewer.selectedEntity.polygon.material = Cesium.Color.fromCssColorString("rgba(239, 178, 51,1)").withAlpha(1)
                 oldmodel._value = viewer.selectedEntity
                 maritimePortInfo.mc = viewer._selectedEntity._dataSource.mc
                 maritimePortInfo.shengMc = viewer._selectedEntity._dataSource.shengMc
                 maritimePortInfo.shiMc = viewer._selectedEntity._dataSource.shiMc
                 maritimePortInfo.xianMc = viewer._selectedEntity._dataSource.xianMc
                 maritimePortInfo.zhenMc = viewer._selectedEntity._dataSource.zhenMc
                 addBoundInfoBox(viewer._selectedEntity._polyline._positions._value[0],"maritimePort")
                 }
             },Cesium.ScreenSpaceEventType.LEFT_CLICK)
        }
        function closeInfo(){
           var info =  document.getElementById("maritimePort")
           info.style.display ="none"
        }
        onMounted(() => {
            initTraffic()
            initIcon()
            // initGangKou()
        });
        return {
            threeMsg,
            title,
            tielu,
            threeArea,
            gonglu,
            status1,
            status2,
            status3,
            status4,
            // oldmodel,
            oldmodel,
            trafficArr,
            maritimePortInfo,
            closeInfo,
            addBoundInfoBox
            // initGangKou
        };
    },
};
</script>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightThree {
        .maritimePort{
            // width:vw(240);
            // height:vh(200);
            background: rgba(3,32,64,0.6)
            display:none;
            border-radius:vw(5);
            box-sizing :border-box;
            position:fixed;
            border:1px solid rgb(48, 163, 196);
            padding:10px;
            font-size:vw(15)
            .maritimePort-close{
                float:right;
                cursor:pointer
            }
            .maritimePort-title{
                width:100%;
                height:vh(30);
                line-height:vh(30);
                // text-align:center;
                // .leftname{
                //     width:20%;
                //     height :vh(30);
                //     float:left;
                //     text-align:right;
                // }
                // .rightname{
                //     width:70%;
                //     height :vh(30);
                //     float:left;
                //     margin-left:vw(10)
                // }
            }
        }
        .transState {
            width: vw(364);
            height: vh(152);
            margin-top: vh(17);
            margin-bottom: vh(20);
            // background: url('/data/images/hngk/交通情况.png') no-repeat;
            background-size: 100% 100%;
            // background:
            padding-top: vh(20);

            .twoMsg {
                display: flex;
                justify-content: space-around;
                margin-bottom: vh(31);

                .road {
                    letter-spacing: vw(1);
                    cursor:pointer
                    span:nth-child(1) {
                        color: #fff;
                        font-size: vw(16);
                        cursor:pointer
                    }

                    span:nth-child(2) {
                        color: #37DCFF;
                        color: #fff;
                        font-size: vw(16);
                    }
                }

                .railway {
                    letter-spacing: vw(1);
                    cursor:pointer;
                    span:nth-child(1) {
                        color: #fff;
                        font-size: vw(16);
                    }

                    span:nth-child(2) {
                        // color: #37DCFF;
                         color: #fff;
                        font-size: vw(16);
                    }
                }
            }

            .threeMsg {
                display: flex;
                justify-content: space-around;
                font-size: vw(16);
                letter-spacing: vw(1);
                text-align: center;

                div {
                    div:nth-child(1) {
                        margin-bottom: vh(26);
                    }

                    div:nth-child(2) {
                        color: #FFBC32;
                    }
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .rightThree {
        position: absolute;
        top: vh(410);
         left:vw1(40);
        .transState {
            width: vw1(414);
            height: vh(230);
            margin-top: vh(20);
            margin-bottom: vh(20);
            background: url('/data/images/hngk/trans.png') no-repeat;
            background-size: 100% 100%;
            padding-top: vh(40);
            .twoMsg {
                display: flex;
                justify-content: space-around;
                margin-bottom: vh(31);

                .road {
                    letter-spacing: vw1(1);

                    span:nth-child(1) {
                        color: #fff;
                        font-size: vw1(18);
                    }

                    span:nth-child(2) {
                        color: #37DCFF;
                        font-size: vw1(18);
                    }
                }

                .railway {
                    letter-spacing: vw1(1);

                    span:nth-child(1) {
                        color: #fff;
                        font-size: vw1(18);
                    }

                    span:nth-child(2) {
                        color: #37DCFF;
                        font-size: vw1(18);
                    }
                }
            }

            .threeMsg {
                display: flex;
                justify-content: space-around;
                font-size: vw1(18);
                letter-spacing: vw1(1);
                text-align: center;

                div {
                    div:nth-child(1) {
                        margin-bottom: vh(30);
                        margin-top :vh(10)
                    }

                    div:nth-child(2) {
                        color: #FFBC32;
                    }
                }
            }
        }
    }
}
</style>